<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>自助售货管理后台</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
    <script src="app-assets/js/Dream.js"></script>
    <script src="app-assets/js/Http.js"></script>
</head>
<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2">
            <h3 class="content-header-title mb-0">按制面板</h3>
        </div>
    </div>
    <div class="content-body">
        <div class="row clearfix">
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch">
                            <div class="p-2 text-center bg-primary bg-darken-2">
                                <i class="fa fa-area-chart font-large-2 white"></i>
                            </div>
                            <div class="p-2 bg-gradient-x-primary white media-body">
                                <h5>总交易额</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-plus"></i> <span id="allTotalAmount"></span>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch">
                            <div class="p-2 text-center bg-danger bg-darken-2">
                                <i class="fa fa-file-text font-large-2 white"></i>
                            </div>
                            <div class="p-2 bg-gradient-x-danger white media-body">
                                <h5>总交易笔数</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i><span
                                        id="allOrderCount"></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch">
                            <div class="p-2 text-center bg-warning bg-darken-2">
                                <i class="fa fa-bar-chart font-large-2 white"></i>
                            </div>
                            <div class="p-2 bg-gradient-x-warning white media-body">
                                <h5>昨天交易额</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i> <span
                                        id="upAllTotalAmount"></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch">
                            <div class="p-2 text-center bg-success bg-darken-2">
                                <i class="fa fa-line-chart font-large-2 white"></i>
                            </div>
                            <div class="p-2 bg-gradient-x-success white media-body">
                                <h5>昨天交易笔数</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i><span
                                        id="upAllOrderCount"></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch bg-red">
                            <div class="p-2 text-center  bg-darken-2">
                                <i class="fa fa-bar-chart font-large-2 white"></i>
                            </div>
                            <div class="p-2  white media-body">
                                <h5>待收货交易额</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-plus"></i> <span id="WaitingMoney"></span>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch bg-pink">
                            <div class="p-2 text-center  bg-darken-2">
                                <i class="fa fa-truck font-large-2 white"></i>
                            </div>
                            <div  class="p-2  white media-body">
                                <h5>待收货笔数</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i><a style="color: white" class="menu-item" href="结算记录.html" target="iframe1"><span
                                        id="WaitingCount"></span></a></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content">
                        <div class="media align-items-stretch border-bottom-success">
                            <div class="p-2 text-center overlay-primary ">
                                <i class="fa fa-smile-o font-large-2 white"></i>
                            </div>
                            <div class="p-2 overlay-primary white media-body">
                                <h5>今日交易额</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i> <span
                                        id="nowMoney"></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-xs-12">
                <div class="card">
                    <div class="card-content overlay-amber">
                        <div class="media  border-bottom-success">
                            <div class="p-2 text-center overlay-amber ">
                                <i class="fa fa-cart-arrow-down font-large-2 white"></i>
                            </div>
                            <div class="p-2 overlay-amber white media-body">
                                <h5>今日交易笔数</h5>
                                <h5 class="text-bold-400 mb-0"><i class="ft-arrow-up"></i> <span
                                        id="nowCount"></span></h5>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="card">
                    <div class="card-header border-0-bottom">
                        <h4 class="card-title">本周销售统计图</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="chartjs" style="height: 300px;" id="echart2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="card">
                    <div class="card-header border-0-bottom">
                        <h4 class="card-title">本年销售统计图</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="chartjs" style="height: 300px;" id="echart1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script>

    //交易额和交易数
    $(document).ready(function () {
        selectTotalAmount('')
        // 获取昨天的日期 0000-00-00 格式
        selectTotalAmountUp(getYesterdayDateInChina())
        weekSales()
        monthSales()
        nowSales()
        WaitingAmount()
    });

    function WaitingAmount() {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/queryWaitingAmount',
            'type': 'get',
            'dataType': 'json',
            'data': {},
            'success': WaitingAmountSuccess
        })
    }
    function WaitingAmountSuccess(data) {
        console.log(data)
        let dataObj = {};
        let pairs = data.data.data.split(';');
        for (var i = 0; i < pairs.length; i++) {
            var keyValue = pairs[i].split(':');
            dataObj[keyValue[0]] = keyValue[1];
        }

        let orderCount = parseInt(dataObj.orderCount);
        let totalAmount = parseFloat(dataObj.totalAmount);


        $('#WaitingCount').html(orderCount)
        $('#WaitingMoney').html(totalAmount)
    }

    function nowSales() {
        // 获取当前时间
        let today = new Date().toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'});
        let date = new Date(today);
        // 格式:0000-00-00
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, '0');
        let day = String(date.getDate()).padStart(2, '0');
        let updatedAt = year + '-' + month + '-' + day;
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/totalAmount',
            'type': 'get',
            'dataType': 'json',
            'data': {updatedAt},
            'success': nowSalesSuccess
        })
    }

    function nowSalesSuccess(data) {
        var dataObj = {};
        var pairs = data.data.data.split(';');
        for (var i = 0; i < pairs.length; i++) {
            var keyValue = pairs[i].split(':');
            dataObj[keyValue[0]] = keyValue[1];
        }

        var orderCount = parseInt(dataObj.orderCount);
        var totalAmount = parseFloat(dataObj.totalAmount);

        $('#nowCount').html(orderCount)
        $('#nowMoney').html(totalAmount)
    }

    function selectTotalAmountUp(updatedAt) {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/totalAmount',
            'type': 'get',
            'dataType': 'json',
            'data': {updatedAt},
            'success': selectTotalAmountSuccess2
        })
    }

    function selectTotalAmount(updatedAt) {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/totalAmount',
            'type': 'get',
            'dataType': 'json',
            'data': {updatedAt},
            'success': selectTotalAmountSuccess
        })
    }

    function selectTotalAmountSuccess(data) {
        var dataObj = {};
        var pairs = data.data.data.split(';');
        for (var i = 0; i < pairs.length; i++) {
            var keyValue = pairs[i].split(':');
            dataObj[keyValue[0]] = keyValue[1];
        }

        var orderCount = parseInt(dataObj.orderCount);
        var totalAmount = parseFloat(dataObj.totalAmount);

        $('#allOrderCount').html(orderCount)
        $('#allTotalAmount').html(totalAmount)
    }

    function selectTotalAmountSuccess2(data) {
        var dataObj = {};
        var pairs = data.data.data.split(';');
        for (var i = 0; i < pairs.length; i++) {
            var keyValue = pairs[i].split(':');
            dataObj[keyValue[0]] = keyValue[1];
        }

        var orderCount = parseInt(dataObj.orderCount);
        var totalAmount = parseFloat(dataObj.totalAmount);

        $('#upAllOrderCount').html(orderCount)
        $('#upAllTotalAmount').html(totalAmount)
    }

    function getYesterdayDateInChina() {
        // 获取当前时间，使用中国时区
        var today = new Date().toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'});
        var date = new Date(today);
        date.setDate(date.getDate() - 1);

        var year = date.getFullYear();
        var month = String(date.getMonth() + 1).padStart(2, '0');
        var day = String(date.getDate()).padStart(2, '0');

        return year + '-' + month + '-' + day;
    }


    let weekNum = []
    let weekMoney = []

    let monthsNum = []
    let monthsMoney = []

    // 获取本周销售统计图
    function weekSales() {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/totalAmountWeek',
            'type': 'get',
            'dataType': 'json',
            'data': {},
            'success': selectWeekSalesSuccess
        })
    }

    function selectWeekSalesSuccess(data) {
        data = data.data.data.replace(/,\]/g, ']');
        weekNum = JSON.parse(data.split(";")[0].split(":")[1]);
        weekMoney = JSON.parse(data.split(";")[1].split(":")[1]);
    }

    function monthSales() {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders/totalAmountMonth',
            'type': 'get',
            'dataType': 'json',
            'data': {},
            'success': monthSalesSuccess
        })
    }

    function monthSalesSuccess(data) {
        data = data.data.data.replace(/,\]/g, ']');
        monthsNum = JSON.parse(data.split(";")[0].split(":")[1]);
        monthsMoney = JSON.parse(data.split(";")[1].split(":")[1]);
    }


    $(function () {
        setTimeout(function () {
            echarts_1();
            echarts_2();
        }, 500);


        function echarts_1() {
            var myChart = echarts.init(document.getElementById('echart1'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                "legend": {

                    "data": [
                        {"name": "数量"},
                        {"name": "金额"},
                    ],
                    "top": "0%",
                    "textStyle": {
                        "color": "#666"//图例文字
                    }
                },

                "xAxis": [
                    {
                        "type": "category",
                        boundaryGap: false,//
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLine: {lineStyle: {color: "#eee"}},
                        axisLabel: {
                            textStyle: {color: "r#666", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "数量「单」",
                        "nameTextStyle": {color: '#666',},
                        "min": 0,
                        //  "max": 15,
                        //"interval": 5,
                        //splitNumber:3,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: '#eee'}},//左线色
                        axisLabel: {textStyle: {color: '#666'}},
                        splitLine: {show: false, lineStyle: {color: "#eee"}},//x轴线
                    },
                    {
                        "min": 0,
                        // "max": 15,
                        "type": "value",
                        "name": "金额「元」",
                        //  splitNumber:3,
                        "nameTextStyle": {color: '#666',},
                        "show": true,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: '#ddd'}},//右线色
                        splitLine: {show: true, lineStyle: {color: "#eee"}},//x轴线
                        axisLabel: {textStyle: {color: '#666'}},
                    },
                ],
                "grid": {
                    "top": "10%",
                    "right": "30",
                    "bottom": "30",
                    "left": "30",
                },
                "series": [
                    {
                        "name": "数量",
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.0)',
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: 'rgba(255,106,125,.5)',

                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,106,125,.5)',
                            }
                        },
                        "data": monthsNum,

                    },

                    {
                        "name": "金额",
                        "type": "line",
                        "yAxisIndex": 1,
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        "data": monthsMoney,
                        lineStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.0)',
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: "rgba(255,158,114,.5)"
                            }
                        },
                        "itemStyle": {
                            "normal": {
                                color: "rgba(255,158,114,.5)"

                            }
                        },

                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echarts_2() {
            var myChart = echarts.init(document.getElementById('echart2'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                "legend": {

                    "data": [
                        {"name": "数量"},
                        {"name": "金额"},
                    ],
                    "top": "0%",
                    "textStyle": {
                        "color": "#666"//图例文字
                    }
                },

                "xAxis": [
                    {
                        "type": "category",
                        boundaryGap: false,//
                        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                        axisLine: {lineStyle: {color: "#eee"}},
                        axisLabel: {
                            textStyle: {color: "r#666", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "数量「单」",
                        "nameTextStyle": {color: '#666',},
                        "min": 0,
                        //  "max": 15,
                        //"interval": 5,
                        //splitNumber:3,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: '#eee'}},//左线色
                        axisLabel: {textStyle: {color: '#666'}},
                        splitLine: {show: false, lineStyle: {color: "#eee"}},//x轴线
                    },
                    {
                        "min": 0,
                        // "max": 15,
                        "type": "value",
                        "name": "金额「元」",
                        //  splitNumber:3,
                        "nameTextStyle": {color: '#666',},
                        "show": true,
                        "axisLabel": {
                            "show": true,

                        },
                        axisLine: {lineStyle: {color: '#ddd'}},//右线色
                        splitLine: {show: true, lineStyle: {color: "#eee"}},//x轴线
                        axisLabel: {textStyle: {color: '#666'}},
                    },
                ],
                "grid": {
                    "top": "10%",
                    "right": "30",
                    "bottom": "30",
                    "left": "30",
                },
                "series": [
                    {
                        "name": "数量",
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.0)',
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: 'rgba(255,106,125,.5)',

                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,106,125,.5)',
                            }
                        },
                        "data": weekNum,

                    },

                    {
                        "name": "金额",

                        "type": "line",
                        "yAxisIndex": 1,
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        "data": weekMoney,
                        lineStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.0)',
                                width: 0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: "rgba(255,158,114,.5)"
                            }
                        },
                        "itemStyle": {
                            "normal": {
                                color: "rgba(255,158,114,.5)"

                            }
                        },

                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })


    function getWeekDates() {
        var today = new Date();
        var currentDay = today.getDay(); // 0（周日）到 6（周六）
        var startDate = new Date(today);
        startDate.setDate(today.getDate() - currentDay + 1); // 本周一的日期

        var dates = [];
        for (var i = 0; i < 7; i++) {
            var date = new Date(startDate);
            date.setDate(startDate.getDate() + i);
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString().padStart(2, '0');
            var day = date.getDate().toString().padStart(2, '0');
            dates.push(year + '-' + month + '-' + day);
        }
        return dates;
    }

</script>
</body>
</html>